<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <style>     
            #aaa::before{content:'我在前面'}
            #aaa::after{content:'我在后面XXOO'}
            
            #bbb{
                width:200px;
                height:150px;
                border:1px solid red;
                
            }
            #bbb::first-line{color:blue;}  /*第一行内容 */
            #bbb::first-letter{color:yellow;}  /*第一个字符 */
            #bbb::selection{color:red;}  /*被选中的部分 */
        </style>
    </head>
    <body>
        <h2>伪对象选择符</h2>
       <p id='aaa'>生命,是一场美好艳遇</p>
       
       <p id='bbb'>从前有个怪物,他一直在吃东西,却怎么也吃不饱.所以到最后,他把他自己也吃掉了</p>
       
       <input type='text' name='uname' placeholder='从前有个怪物' />
    </body>
</html>